<template>
    <!-- 导航栏 -->
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/home' }">
            <h3>首页</h3>
        </el-breadcrumb-item>

        <el-breadcrumb-item :to="{ path: '/operationdev' }">
            <h3>运维操作-数据导出</h3>
        </el-breadcrumb-item>

    </el-breadcrumb>
    <el-divider />
    <el-row :gutter="2"> <!-- 行提供 gutter 属性来指定列之间的间距，其默认值为0。 -->

        <!-- <div class="mb-4">
            <el-button type="success" @click="downdiscon">查询全国断网数据</el-button>
            <el-button type="success" @click="downloaddata">下载全国断网数据</el-button>
        </div> -->
    </el-row>

    <!-- <el-divider /> -->

    <el-row>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <div class="mb-4">
                <el-form-item label="合作方ID">
                    <el-input v-model="formInline.partnerid" placeholder="合作方ID" clearable />
                </el-form-item>
                <el-form-item label="站点ID">
                    <el-input v-model="formInline.station" placeholder="站点ID" clearable />
                </el-form-item>

                <el-form-item label="开始时间">
                    <el-date-picker v-model="formInline.startdate" type="date" placeholder="开始时间" clearable />
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker v-model="formInline.enddate" type="date" placeholder="结束时间" clearable />
                </el-form-item>

                <el-form-item label="操作内容">
                    <el-select v-model="formInline.choose" placeholder="选中要操作列表" style="width: 200px;">
                        <el-option label="全网断网数据" value="1" />
                        <el-option label="合作方下所有站点时间段内收入" value="2" />
                        <el-option label="时间段内站点平均使用率" value="3" />
                        <el-option label="站点时间段内收益" value="4" />
                        <el-option label="站点时间段内已分未分" value="5" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onEarnings">查询</el-button>
                </el-form-item>
            </div>

        </el-form>
    </el-row>

    <el-divider />

    <!-- 列表 -->
    <el-row class="el-row" :gutter="20">
        <el-col :span="20" :offset="2">

            <el-table :data="tasklisttable" :border="true" style="width: 100%" stripe :table-layout="tableLayout">
                <!-- data  tasklisttable 返回的数据 要和每个列表中的 prop 数据一致才可以正常显示-->
                <el-table-column prop="pk" label="ID" width="70" />
                <el-table-column prop="fields.taskid" label="任务ID" width="300" />
                <el-table-column prop="fields.status" label="当前状态" width="160" />
                <el-table-column prop="fields.create_timestamp" label="创建时间" width="260" />
                <el-table-column prop="fields.res_url" label="结果存储" />
                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="scope">
                        <el-button size="small" type="danger" @click="down(scope.row.fields.taskid)">
                            下载
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-col>
    </el-row>

</template>


<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'    //图标显示引用
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { disconnected, downfile, partner_revenue, querey_taskid, pretreatment, get_tasklist, querey_redis } from '../api/ops'

// 表单初始化
const formInline = reactive({
    partnerid: '',
    station: '',
    startdate: '',
    enddate: '',
    choose: ""

})

const tableLayout = ref('auto')
const tasklisttable = ref([])


// 后台返回的taskid
const dowdloadtaskid = ref()


// 加载 已经完成的任务和状态
onMounted(() => {

    alltask()
})


// 更新任务列表
function alltask() {
    get_tasklist().then(
        res => {
            // 更新table中的数据
            tasklisttable.value = res.data.msg
        }
    )
}



// 查询
function onEarnings() {

    // 选择choose 后要进行校验
    if (formInline.choose) {
        console.log(formInline.choose, formInline.partnerid, formInline.station, formInline.station, formInline.startdate, formInline.enddate);

        if (formInline.choose === "1") {
            console.log(formInline.choose);
            pretreatment(formInline).then(
                res => {
                    console.log(res.data);
                    dowdloadtaskid.value = res.data.taskid
                    console.log(dowdloadtaskid.value);

                    alltask()

                    ElMessage({
                        type: 'success',
                        message: res.data.msg,
                    })
                }
            )


            formInline.choose = ""
            formInline.partnerid = ""
            formInline.station = ""
            formInline.startdate = ""
            formInline.enddate = ""


        }
        if (formInline.choose === "2") {
            console.log(formInline.choose);
            pretreatment(formInline).then(
                res => {
                    dowdloadtaskid.value = res.data.taskid
                    // tasklisttable.value = res.data

                    alltask()

                    ElMessage({
                        type: 'info',
                        message: res.data.msg
                    })

                }
            ).catch(
                res => {
                    alert('接口报错了！')

                })



            formInline.choose = ""
            formInline.partnerid = ""
            formInline.station = ""
            formInline.startdate = ""
            formInline.enddate = ""

        }

        if (formInline.choose == "3") {

            console.log(formInline.choose);
            pretreatment(formInline).then(
                res => {
                    dowdloadtaskid.value = res.data.taskid
                    alltask()

                    ElMessage({
                        type: 'info',
                        message: res.data.msg,
                    })

                }
            ).catch(
                res => {
                    alert('接口报错了！')

                })

            formInline.choose = ""
            formInline.partnerid = ""
            formInline.station = ""
            formInline.startdate = ""
            formInline.enddate = ""

        }

        if (formInline.choose == "4") {

            console.log(formInline.choose);
            pretreatment(formInline).then(
                res => {
                    dowdloadtaskid.value = res.data.taskid
                    alltask()

                    ElMessage({
                        type: 'info',
                        message: res.data.msg,
                    })

                }
            ).catch(
                res => {
                    alert('接口报错了！')

                })
            formInline.choose = ""
            formInline.partnerid = ""
            formInline.station = ""
            formInline.startdate = ""
            formInline.enddate = ""

        }

        if (formInline.choose == "5") {

            console.log(formInline.choose);
            pretreatment(formInline).then(
                res => {
                    dowdloadtaskid.value = res.data.taskid
                    alltask()

                    ElMessage({
                        type: 'info',
                        message: res.data.msg,
                    })

                }
            ).catch(
                res => {
                    alert('接口报错了！')

                })


            formInline.choose = ""
            formInline.partnerid = ""
            formInline.station = ""
            formInline.startdate = ""
            formInline.enddate = ""

        }


    } else {
        ElMessage({
            type: 'error',
            message: "请下拉选择要操作的内容项目，根据所需参数进行添加到表单中,然后点击查询,按照提示操作"
        })
    }


}


// 列表操作中 按钮下载  
function down(_taskid) {

    console.log(_taskid);

    querey_redis(_taskid).then(
        res => {
            console.log(res);
            alltask()
            // 校验接口的返回
            if (res.data.errorCode === 200) {



                let filename = (res.data.result).split("/").pop()
                console.log(filename);

            // 判断文件是否是excel
                if (filename.endsWith('.xlsx')) {

                    ElMessage({
                        type: 'success',
                        message: res.data.status + "准备下载" + res.data.result,
                    })
                    // 下载文件
                    downfile(res.data.result).then(
                        res => {
                            // 打开下载的文件 总是提示文件内容损坏，不能打开 , 关闭掉 main。js中的mock相关的文件导入就可以了解决了
                            let blob = new Blob([res.data], { "type": 'application/vnd.ms-excel;charset=utf-8' });

                            const a = document.createElement('a');
                            const url = URL.createObjectURL(blob);
                            a.href = url;
                            a.setAttribute('download', filename); // 设置下载文件名
                            document.body.appendChild(a);      //将a标签添加到body当中
                            a.click();
                            document.body.removeChild(a);
                            //释放内存
                            window.URL.revokeObjectURL(url);
                        }

                    )

                }else
                {
                    ElMessage({
                        type: 'success',
                        message: "没有文件生成！"
                    })
                }



            } else {
                ElMessage({
                    type: 'error',
                    message: "当前没有查询到结果，请稍后再查！",
                })
            }






        }
    )
}



// 查询断网数据查询 ，返回excel表格 
function downdiscon() {
    console.log("downdiscon");
    disconnected().then(
        res => {
            console.log(res.data);
            dowdloadtaskid.value = res.data.taskid
            console.log(dowdloadtaskid.value);

            ElMessage({
                type: 'info',
                message: `您已经点击了一次，已经开始执行，请不要再重复点击 ，查询状态请点击下载断网数据按钮 `,
            })
        }
    )

}


// 下载 先判断 ，后下载 返回excel表格  
function downloaddata() {
    // 查询当前taskid的任务进度，
    // 1、如果还在执行中，tips
    // 2、如果已经执行完成， 开始下载对应的excel
    console.log(dowdloadtaskid.value);

    querey_taskid(dowdloadtaskid.value).then(
        res => {

            if (res.data.status === 'PENDING') {
                ElMessage({
                    type: 'warning',
                    message: `当前正在执行中，执行完成后，再进行下载！`,
                })
            }
            else {
                ElMessage({
                    type: 'info',
                    message: `任务已经执行完成，准备进行下载！`,
                })




            }

        }
    )




}




</script>


<style lang="less" scoped>
.mb-4 {
    margin-left: 50px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>